<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">

      <Game>
        <!-- 神奇神奇  一段简单的语句 再 template 外面 啥都不加 就直接进入 插槽里面了-->
        <!-- <h2>一段文字</h2> -->
        <!-- 神奇  神奇  如果是  template 不加 slot 是不会有插槽效果的 -->
        <template #default>
          <h1>一段文字</h1>
        </template>
      </Game>

      <Game>
        <template #default="{youxi}">
          <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
        </template>
      </Game>

    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
import Game from './Game.vue';

</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .content {
    display: flex;
    justify-content: space-evenly;
  }
  img,video {
    width: 100%;
  }
</style>